/* eslint-disable */
<template>
  <div class="passenger-select1">
    <el-form ref="form" :model="form" label-width="88px" size="mini">
      <el-form-item label="统计范围">
        <span
          class="allmarket"
          :class="{ active: isActive == true }"
          v-on:click="select()"
          >全部市场</span
        >
        <el-dropdown
          @command="handleCommand"
          :class="{ active2: isActive == false }"
          placement="bottom-start"
        >
          <el-button type="primary">
            {{ value }}
            <i class="el-icon-arrow-down el-icon--right"></i>
          </el-button>
          <el-dropdown-menu slot="dropdown" class="project-dropdown">
            <el-dropdown-item
              v-for="item in marketArray"
              :key="item.marketId"
              :command="item.marketId"
              >{{ item.marketName }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <!-- <el-select
          v-model="value"
          placeholder="指定市场"
          @change="handleCommand"
          :class="{active2:isActive==false} "
        >
          <el-option
            v-for="item in marketArray"
            :key="item.marketId"
            :label="item.marketName"
            :value="item.marketId"
            :disabled="!item.equipmentIsExist"
          ></el-option>
        </el-select> -->
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  // props:["marketArray"],
  name: "market",
  components: {},
  data() {
    return {
      isActive: true,
      marketArray: [],
      date: {
        marketId: 0,
        startDate: "2020-07-17",
        endDate: "2020-07-17",
      },
      form: {},
      value: "指定市场",
    };
  },
  created() {},
  mounted() {
    this.getmarketlist();
    this.fn();
    // console.log(this.marketArray);
  },
  //   watch:{
  //   marketArray(){
  //     console.log(this.marketArray)
  //     // this.initData()
  //   }
  // },
  methods: {
    getmarketlist() {
      this.$store
        .dispatch("marketInfoMge/getmarketlist", {})
        .then((data) => {
          // console.log(data);
          this.marketArray = data;
        })
        .catch((err) => {
          console.log(err);
        });
    },

    handleCommand(command) {
       this.date.marketId = command;
       for (let i = 0; i < this.marketArray.length; i++) {
          if (command == this.marketArray[i].marketId){
            this.value = this.marketArray[i].marketName;  
            // console.log( this.value );
            this.isActive = false;
          }
            
        }
        this.fn();
    },
 
        


    select() {
      this.isActive = true;
      this.date.marketId = 0;
      this.value = "指定市场";
      this.fn();
    },

    fn() {
      this.$emit("listenEvent", this.date);
    },
  },
};
</script>
<style lang="scss" scoped>
.passenger-select1 ::v-deep .el-radio-button__inner {
  padding: 12px 40px;
}
.allmarket {
  background: #fff;
  color: #606266;
  font-weight: 500;
  font-family: "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif";
  font-size: 13px;
  padding: 6px 20px;
  margin-right: 20px;
  // line-height: 38px;
  border-radius: 0px;
  cursor: pointer;
}
.active {
  font-size: 13px;
  background: #409eff;
  padding: 6px 20px;
  color: #fff;
  font-weight: 500;
  font-family: "Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif";
}
.active2 {
  background: #409eff;
  color: #fff;

  ::v-deep .el-button--primary {
    color: #fff;
  }
}
::v-deep .el-input {
  width: 80%;
  color: #606266;
}
::v-deep .el-input__inner {
  font-weight: 500;
  font-size: 13px;
}
::v-deep .el-button--primary {
  background: none;
  color: #606266;
  border: none;
}
::v-deep .el-button--primary:focus {
  background: none;
  border-radius: 0px;
  // color: #fff;
  // border: blue;
}
::v-deep .el-button--mini,
.el-button--small {
  font-size: 13px;
  font-weight: 500;
}
.el-dropdown {
  vertical-align: top;
}
.el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.el-icon-arrow-down {
  font-size: 12px;
}
.project-dropdown {
  //设置高度才能显示出滚动条 !important
  height: 300px;
  overflow: auto;
}
.project-dropdown::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: #f5f5f5;
}
.project-dropdown::-webkit-scrollbar-track {
  //-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
  border-radius: 10px;
  background-color: #f5f5f5;
}
// .el-button--primary:focus
</style>